<template>

  <div class="app-container">




    <el-carousel :interval="3000" arrow="always" type="card" height="calc(60vh - 100px )">
      <el-carousel-item v-for="item in pic" :key="item">
        <el-image
            style="width: 100%; height: 100%"
            :src="item.pic">
        </el-image>
      </el-carousel-item>
    </el-carousel>


    <div style="margin-left: 10vw">
      <div style="display: flex;justify-content: center">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="200px">
          <el-form-item  prop="name">
            <el-input
                v-model="queryParams.keyname"
                placeholder="请输入关键字"
                clearable

                style="width: 500px;margin-top: 10px"
                @keyup.enter.native="getData"
            />
          </el-form-item>
          <el-form-item>

            <div style="display: flex">
              <div @click="getData" title="搜索" style="margin-right: 15px;cursor: pointer;"><img src="@/assets/search.png" style="width: 60px;height: 60px"></div>
              <div @click="resetQuery" title="重置" style="cursor: pointer"><img src="@/assets/chong.png" style="width: 60px;height: 60px"></div>
            </div>

          </el-form-item>
        </el-form>

      </div>
      <div style="margin-top: 30px"></div>
   <span style="color: black;font-size: 50px;display: flex;justify-content: center;margin-right: 8vw">
        <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="64" height="64"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
        热门体验馆
      <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="64" height="64"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
      </span>

      <div class="card-container">
        <div v-for="(item, index) in museumList" :key="index" class="card-item" @click="todetil1(item.id)">
          <el-card shadow="hover">

            <el-image
                style="width: 100% ;height: 180px"
                :src="item.pic.split(',')[0]"

            >
            </el-image>

            <div
                style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span>
                <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="30" height="30"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>

                {{ item.name }}</span>
              <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="30" height="30"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
            </div>
            <div
                style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span>{{ item.address }}</span>
            </div>

          </el-card>
        </div>
      </div>

      <div style="margin-top: 30px"></div>

      <span style="color: black;font-size: 50px;display: flex;justify-content: center;margin-right: 8vw">
        <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="64" height="64"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
        热门非遗
      <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="64" height="64"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
      </span>


      <div class="card-container">
        <div v-for="(item, index) in activityList" :key="index" class="card-item" @click="todetil2(item.id)">
          <el-card shadow="hover">

            <el-image
                style="width: 100%; height: 180px"
                :src="item.pic.split(',')[0]"


            >
            </el-image>

            <div style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span>
                <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="30" height="30"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>

                {{ item.name }}</span>
              <svg t="1735026230868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6376" width="30" height="30"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" fill="#d81e06" p-id="6377"></path></svg>
            </div>

            <div style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span>{{ item.inheritor }}</span>
            </div>
            <div style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span style="color:red;">￥{{ item.price }}</span>
            </div>

          </el-card>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

import {listCarousel} from "@/api/project/carousel";
import {listMuseum} from "@/api/project/museum";
import {listActivity} from "@/api/project/activity";


export default {
  name: "index",
  data() {
    return {
      pic: [],
      queryParams:{},
      keyname:'',
      museumList: [],
      activityList: []
    }
  },
  created() {
    this.getData()
  },

  methods: {
    resetQuery(){
      this.queryParams= {

        keyname: null,
      }
      this.getData()
    },
    todetil1(id){
      this.$router.push({ path: '/museum/detail', query: { id: id } });
    },
    todetil2(id){
      this.$router.push({ path: '/activity/detail', query: { id: id } });
    },
    getData() {
      listCarousel().then(res => {
        this.pic = res.data
        console.log(this.pic)
      })

      listMuseum().then(res => {


        if (this.queryParams.keyname){
          this.museumList=res.data.filter(item=>{
            return item.name.indexOf(this.queryParams.keyname)>-1 &&item.bookingCount>5
          }).slice(0,3)

        }else {
          this.museumList = res.data.filter(item=>{
            return item.bookingCount>5
          }).slice(0, 3)
        }

      })

      listActivity().then(res => {


        if (this.queryParams.keyname){
          this.activityList=res.data.filter(item=>{
            return item.name.indexOf(this.queryParams.keyname)>-1 &&item.bookingCount>5
          }).slice(0,3)

        }else {
          this.activityList = res.data.filter(item=>{
            return item.bookingCount>5
          }).slice(0, 3).slice(0, 3)
        }

      })
    }
  }
}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.card-item {
  width: 25vw;
  margin-left: 1vw;
  margin-bottom: 20px; /* 行间距 */
}


.back {
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

.app-container {
  background-image: url('../../assets/bg.png');
  background-size: cover; /* 确保背景图片覆盖整个容器 */

  background-attachment: scroll;

}
</style>


